<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.util.*"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${webName}</title>
<link rel="stylesheet" href="${res}/layui/css/layui.css">
<link rel="stylesheet" href="${res}/story/css/html.css">
</head>
<body>
	<div class="story-registe-form layui-anim layui-anim-upbit">
		<div class="story-h1">小故事后台登录</div>
		<hr>
		<form class="layui-form layui-form-pane" style="padding-left:50px;padding-right:50px;"  method="post">
			<div class="layui-form-item">
				<label class="layui-form-label"><i class="layui-icon">&#xe612;</i>&nbsp;用户名</label>
	    		<div class="layui-input-block">
	     			<input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="请输入用户名" class="layui-input">	    		
	    		</div>
	    		<span>${errors.username}</span>
	    	</div>
	    	<div class="layui-form-item">
				<label class="layui-form-label"><i class="layui-icon">&#xe6b2;</i>&nbsp;密码</label>
	    		<div class="layui-input-block">
	     			<input type="password" name="password" lay-verify="password" autocomplete="off" placeholder="请输入密码" class="layui-input">
	    		</div>	
	    		<span>${errors.password}</span>
	    	</div>	
	    	<div class="layui-form-item">
				<label class="layui-form-label"><i class="layui-icon">&#xe6b2;</i>&nbsp;验证码</label>  
	    			<div class="layui-input-inline">
	     				<input type="text" name="verifyNumber" lay-verify="verifyNumber" autocomplete="off" placeholder="请输入验证码" class="layui-input">
	    				 	
	    			</div>    			
	    			   <img class="verifyNumber" src="${base}/jcaptcha.jpg" title="点击更换验证码"/>		
	    	</div>	
	    	<br/>
			<div class="layui-form-item" align="center">
			    <button class="layui-btn  layui-btn-normal layui-bg-cyan" lay-submit="" lay-filter="registe"><i class="layui-icon">&#x1005;</i>&nbsp;登录</button>
			 	<br/><br/><span style="padding:10px;color:#000000;">还没有账号？点这里<a href="${base}/manager/registe" style="color:#FF5722;">注册</a></span>
			 </div>
		</form>
	</div>
	<script type="text/javascript">
		if(window !=top){  
		    top.location.href='${base}/admin/login';  
		}  
	</script>
	<script src="${res}/layui/layui.all.js" charset="utf-8"></script>
	<script type="text/javascript">
		;!function(){
			$ = layui.$;
			var layer = layui.layer;
			var form = layui.form;	
			form.verify({
			    username: function(value){
			      if(value.length < 6 || value.length > 15){
			        return '必须6到15位字母或数字，首位须为字母！';
			      }		
			    }
			    ,password: [/(.+){6,30}$/, '密码必须6到30位']
			    ,repassword:function(value){
			    	var passwordValue = $('input[name=password]').val();
			    	if(value != passwordValue){
			    		return '两次输入的密码不一致!';
			    	}
			    }
			  });
			 form.on('submit(registe)', function(data){
				  	var buttonHtml = $('form').find('button').html();
				 	var server = '${base}/manager/login/do';
				 	$.ajax({
				 		url:server,
				 		type:'post',
				 		data:data.field,
				 		beforeSend:function(){		
				 			var icon = '<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop" style="display: inline-block;">&#xe63d;</i>&nbsp;';
				 			$('form').find('button').html(icon+'登陆中');
				 			$('form').find('button').addClass('layui-btn-disabled');
				 			$('form').find('button').attr('disabled','disabled');		 			
				 			
				 		},
				 		success:function(result){
				 			var res = $.parseJSON(result);
				 			if(res&&res.status===0){
				 				layer.msg(res.msg);
				 				window.location.href='${base}/manager/index';
				 			}else{
				 				layer.msg(res.msg);
				 				$('.verifyNumber').attr('src','${base}/jcaptcha.jpg?'+new Date().getTime());
				 				$('input').val('');
				 			}
				 		},
				 		error:function(){
				 			layer.msg('服务器发生了异常！登陆失败！');
				 		},
				 		complete:function (XMLHttpRequest, textStatus) {
				 			$('form').find('button').html(buttonHtml);
				 			$('form').find('button').removeClass('layui-btn-disabled');
				 			$('form').find('button').removeAttr('disabled','disabled');
				 		}
				 	
				 	});
				    return false;
				 });
			 //更换验证码
			 $('.verifyNumber').on('click',function(){
				 $(this).attr('src','${base}/jcaptcha.jpg?'+new Date().getTime());
			 });
			}();
	</script>
	<c:if test="${error!=null}">
		<script type="text/javascript">
			var msg = ${error};
			layer.msg(msg);
		</script>
	</c:if>
	<c:if test="${success!=null}">
		<script type="text/javascript">
			layer.msg('注册成功！快快登录吧！');
		</script>
	</c:if>
</body>
</html>